<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>${blogUser.name}的微语</title>
    <link rel="stylesheet" type="text/css" href="/static/client/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/client/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%-- 公共部分--%>
<jsp:include page="comonent/top.jsp"/>

<div class="content whisper-content">
    <div class="cont">
        <div class="whisper-list">
            <c:forEach var="w" items="${page.dataList}">
                <div class="item-box">
                    <div class="item">
                        <div class="whisper-title">
                            <fmt:formatDate value="${w.createtime}" pattern="HH:mm:ss"></fmt:formatDate>
                            <i class="layui-icon layui-icon-date"></i><span class="hour">12:25</span><span
                                class="date"></span>
                        </div>
                        <div> ${w.content}</div>
                        <div class="op-list">
                            <p class="like"><i class="layui-icon layui-icon-praise"></i><span>${w.awesome}</span></p>
                            <p class="edit"><i class="layui-icon layui-icon-reply-fill"></i><span>1200</span></p>
                            <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
                        </div>
                    </div>
                    <div class="review-version layui-hide">
                        <div class="form">
                            <img src="/static/client/img/001.png" width="30px" >
                            <form class="layui-form" action="">
                                <input type="hidden" id="token" name="token" value="${token}">
                                <input type="hidden"  value="${w.uuid}" name="articleid">

                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea name="content" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: right;">
                                        <button class="layui-btn" lay-submit lay-filter="formComment">確定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="list-cont" id="${w.uuid}">
                        </div>

                        <div id="${w.uuid}-page"></div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <div id="demo" style="text-align: center;"></div>
    </div>
</div>
<input type="hidden" value="${page.pageIndex}" id="pageIndex">
<input type="hidden" value="${page.count}" id="count">
<script type="text/html" id="laytplCont">
    {{# layui.each(d,function(index,item){ }}
    <div class="cont">
        <div class="img" >
            {{# if(item.photo){ }}
            <img src="{{item.photo}}" alt=""  width="40px"  height="40px" >
            {{# } else { }}
            <img src="/static/client/img/header.png" alt="">
            {{# } }}
        </div>
        <div class="text">
            <p class="tit"><span class="name">{{item.username}}</span><span class="data">{{item.createtime}}</span></p>
            <p class="ct">{{item.content}}</p>
        </div>
    </div>
    {{# }); }}
    {{# if(d.length ===0){}}
    <h3>暂无评论</h3>
    {{# } }}
</script>
<%-- 公共部分--%>
<jsp:include page="comonent/foot.jsp"/>

<script type="text/javascript" src="/static/client/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/static/client/js/util/'
    }).use(['element', 'laypage', 'form', 'menu','laytpl','jquery'], function () {
        element = layui.element, laypage = layui.laypage, form = layui.form, menu = layui.menu;
        let $ =layui.jquery;
        var laytpl = layui.laytpl;
        menu.init();
        menu.off(function (off,form) {
            if (off==null){
                loadComment(1, form.find("[name='articleid']").val())
            }
        });
        menu.submit()
      //执行一个laypage实例
      let page = laypage.render({
        curr: $("#pageIndex").val(),
        limit: 5,
        elem: "demo"//注意，这里的 test1 是 ID，不用加 # 号
        , count: $("#count").val() //数据总数，从服务端得到
        , jump: function (obj, first) {
          //首次不执行
          if (!first) {
            let path= location.href;
            if (path.indexOf("?")!=-1){
              path=path.substring(0,path.indexOf("?"))
            }
            window.location=path+"?pageIndex="+obj.curr;

          }
        }
      });


        form.on('submit(formComment)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "/comment/sendComment",
                data:data.field,
                dataType: "JSON",
                type: "POST",
                success: function (res) {
                    if (res.success){
                        data.form.reset();
                        loadComment(1,data.field.articleid);
                    }
                    layer.msg(res.content);
                }, error: function () {
                    layer.msg("服务器错误");
                }
            });


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        function loadComment(pageIndex, uuid) {
            $.ajax({
                url: "/comment/pageList",
                data: {pageIndex: pageIndex, uuid: uuid, token:$("#token").val()},
                dataType: "JSON",
                type: "GET",
                success: function (res) {
                    console.log(res);
                    if (res.success) {
                        let page = res.data;
                        laytpl($("#laytplCont").html()).render(page.dataList, function (html) {
                            $("#"+uuid).html(html);
                        });
                        //执行一个laypage实例
                        laypage.render({
                            curr: page.pageIndex,
                            limit: page.pageSize,
                            elem: uuid+'-page' //注意，这里的 test1 是 ID，不用加 # 号
                            , count: page.count //数据总数，从服务端得到
                            , jump: function (obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if (!first) {
                                    loadComment(obj.curr, uuid);
                                }
                            }
                        });

                    }
                }, error: function () {
                    $("#"+uuid).html("<h3>服务器异常加载</h3>");
                }
            });
        }
    })
</script>
</body>
</html>